<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>远程视频</title>
    <meta charset="utf-8">

</head>

<body>

<div class="pure-g">

    <!-- Video area -->
    <div class="pure-u-2-3" id="video-container">
        <video id="my-video" muted="true" autoplay></video>
    </div>
    <div id="my-id"></div>

</div>
</body>
<script type="text/javascript" th:src="@{/movie/adapter.js}"></script>
<script type="text/javascript" th:src="@{/movie/jquery-1.8.3.min.js}"></script>
<script type="text/javascript" th:src="@{/movie/peer.js}"></script>

<script th:inline="javascript">
    $(function () {
        // PeerJS object
        var peer = new Peer(
            {
                host: "127.0.0.1",
                port: 80,
                path: "/",
                debug: 3,
                config: {
                    "iceServers": [{
                        "url": "turn:127.0.0.1",
                        "username": "eztest",
                        "credential": "eztest-pass-1234"
                    }]
                }
            }
        );


        peer.on('open', function () {
            $('#my-id').text(peer.id);
        });

        peer.on('error', function (err) {
            alert(err.message);
        });

        peer.on('connection', function (conn) {
            //call monitor
            console.info('incomming connection: ' + conn.peer);
            peer.call(conn.peer, window.localStream);
        });

        init();
    });

    function init() {
        // Get audio/video stream
        navigator.getUserMedia({
            audio: true,
            video: {
                width: {min: 320, ideal: 640, max: 800},
                height: {min: 240, ideal: 480, max: 600}
            }
        }, function (stream) {
            // Set your video displays
            $('#my-video').prop('src', URL.createObjectURL(stream));

            window.localStream = stream;
        }, function () {
        });
    }


</script>
</html>
